<!-- 律师入驻页面 -->
<template>
	<view class="set-lawyer-box">
		<!-- 顶部的提示文字 -->
		<view class="top-tip-box">您提交的资料仅用于律师认证,我们会对您提供的信息加密保护</view>
		<!-- 主体表单内容区域 -->
		<view class="set-lawyer-form-box">
			<u-form :model="setLawyerFormData" ref="setLawyerFormRef">
				<view class="form-item">
					<u-form-item label="律师姓名" label-width="145rpx" required prop="name">
						<u-input placeholder="请填写" input-align="right" type="text" :clearable="false" v-model="setLawyerFormData.name" />
					</u-form-item>
				</view>
				<view class="form-item">
					<u-form-item label="电话" label-width="145rpx" required prop="phone">
						<u-input placeholder="请填写" input-align="right" type="number" :clearable="false" v-model="setLawyerFormData.phone" />
					</u-form-item>
				</view>
				<view class="form-item">
					<u-form-item label="性别" label-width="145rpx" required>
						<u-input placeholder="性别" type="select" input-align="right" v-model="setLawyerFormData.sex" @click="sexShow = true" />
					</u-form-item>
					<u-select :list="sexList" v-model="sexShow" @confirm="selectSexClick"></u-select>
				</view>
				<view class="form-item">
					<u-form-item label="地区" label-width="145rpx" required>
						<u-input placeholder="请选择" type="select" input-align="right" v-model="setLawyerFormData.region_label" @click="areaShow = true" />
					</u-form-item>
					<u-select v-model="areaShow" mode="mutil-column-auto" :list="provinceDataList" @confirm="selectAreaClick"></u-select>
				</view>
				<view class="form-item">
					<u-form-item label="详细地址" label-position="top" label-width="auto" required prop="address">
						<u-input placeholder="请输入详细地址" type="textarea" input-align="left" v-model="setLawyerFormData.address" :clearable="false" />
					</u-form-item>
				</view>
				<!-- 上传头像区域 -->
				<view class="form-item upload-avatar-box">
					<u-form-item label="上传头像" label-width="145rpx" required prop="sex"></u-form-item>
					<text class="avatar-text">请规范上传你的头像，此头像将展示在名片和详情处</text>
					<view class="upload-avatar">
						<view class="avatar-box">
							<u-image width="154rpx" height="154rpx" :src="vuex_url + '/static/my-icon/avatar-tem.png'"></u-image>
							<text class="text">示例</text>
						</view>
						<view class="avatar-box">
							<view class="upload-avatar-img" @click="uploadFunction(1)">
								<u-avatar slot="addBtn" size="154" :src="setLawyerFormData.avatar_src"></u-avatar>
							</view>
							<text class="text">上传头像</text>
						</view>
					</view>
				</view>
				<!-- 上传身份证区域 -->
				<view class="form-item upload-avatar-box">
					<u-form-item label="上传身份证" label-width="200rpx" required prop="sex"></u-form-item>
					<!-- 正面 -->
					<view class="upload-ID">
						<view class="upload-ID-box">
							<u-image class="ID-img" width="296rpx" height="189rpx" :src="vuex_url + '/static/my-icon/ID1.png'"></u-image>
							<text class="text">正确示例：文字清晰可见</text>
						</view>
						<view class="upload-ID-box"  @click="uploadFunction(2)">
							<view class="upload-ID-img" v-if="setLawyerFormData.user_ID_main">
								<u-image width="296" height="188" :src="setLawyerFormData.user_ID_main"></u-image>
							</view>
							<view class="upload-ID-img" slot="addBtn" v-else>
								<view class="upload-ID"></view>
								<u-icon name="camera-fill" size="100" color="#00C9B1"></u-icon>
							</view>
							<text class="text">点击上传身份证正面照片</text>
						</view>
					</view>
					<!-- 反面 -->
					<view class="upload-ID u-m-t-60">
						<view class="upload-ID-box">
							<u-image class="ID-img" width="296rpx" height="189rpx" :src="vuex_url + '/static/my-icon/ID2.png'"></u-image>
							<text class="text">正确示例：文字清晰可见</text>
						</view>
						<view class="upload-ID-box" @click="uploadFunction(3)">
							<view class="upload-ID-img" v-if="setLawyerFormData.user_ID_back">
								<u-image width="296" height="188" :src="setLawyerFormData.user_ID_back"></u-image>
							</view>
							<view class="upload-ID-img" slot="addBtn" v-else>
								<view class="upload-ID"></view>
								<u-icon name="camera-fill" size="100" color="#00C9B1"></u-icon>
							</view>
							<text class="text">点击上传身份证反面照片</text>
						</view>
					</view>
				</view>
				<!-- 证件年审页面区域 -->
				<view class="form-item upload-avatar-box">
					<u-form-item label="请上传证件年审页面" label-width="500rpx" required prop="sex"></u-form-item>
					<view class="upload-ID">
						<view class="upload-ID-box">
							<u-image class="ID-img" width="296rpx" height="189rpx" :src="vuex_url + '/static/my-icon/ID-tem.png'"></u-image>
							<text class="text">正确示例：文字清晰可见</text>
						</view>
						<view class="upload-ID-box" @click="uploadFunction(4)">
							<view class="upload-ID-img" v-if="setLawyerFormData.book_year_img">
								<u-image width="296" height="188" :src="setLawyerFormData.book_year_img"></u-image>
							</view>
							<view class="upload-ID-img" slot="addBtn" v-else>
								<view class="upload-ID"></view>
								<u-icon name="camera-fill" size="100" color="#00C9B1"></u-icon>
							</view>
							<text class="text">点击上传证件年审页面照片</text>
						</view>
					</view>
				</view>
				<!-- 上传律师执业照区域 -->
				<view class="form-item upload-avatar-box">
					<u-form-item label="请上传律师执业照" label-width="500rpx" required prop="sex"></u-form-item>
					<view class="upload-ID">
						<view class="upload-ID-box">
							<u-image class="ID-img" width="296rpx" height="189rpx" :src="vuex_url + '/static/my-icon/ID-tem.png'"></u-image>
							<text class="text">正确示例：文字清晰可见</text>
						</view>
						<view class="upload-ID-box" @click="uploadFunction(5)">
							<view class="upload-ID-img" v-if="setLawyerFormData.lawyer_practice_img">
								<u-image width="296" height="188" :src="setLawyerFormData.lawyer_practice_img"></u-image>
							</view>
							<view class="upload-ID-img" slot="addBtn" v-else>
								<view class="upload-ID"></view>
								<u-icon name="camera-fill" size="100" color="#00C9B1"></u-icon>
							</view>
							<text class="text">点击上传律师执业照</text>
						</view>
					</view>
				</view>
				<!-- 职业信息区域 -->
				<view class="lawyer-data-title">职业信息</view>
				<!-- 学历 -->
				<view class="form-item">
					<u-form-item label="学历" label-width="auto" required>
						<u-input placeholder="请选择" type="select" input-align="right" v-model="setLawyerFormData.lawyer_education" @click="eduShow = true" />
					</u-form-item>
					<u-select :list="eduList" v-model="eduShow" @confirm="selectEduClick"></u-select>
				</view>
				<!-- 擅长领域 -->
				<view class="form-item">
					<u-form-item label="擅长领域" label-width="200rpx" required>
						<u-input placeholder="请选择" type="select" input-align="right" v-model="setLawyerFormData.lawyer_good_type" @click="goodTypeShow = true" />
					</u-form-item>
					<u-select :list="goodTypeList" mode="mutil-column" v-model="goodTypeShow" @confirm="selectGoodTypeClick"></u-select>
				</view>
				<view class="form-item">
					<u-form-item label="律师证书编号" label-width="200rpx" required prop="lawyer_number">
						<u-input placeholder="请填写" type="text" input-align="right" v-model="setLawyerFormData.lawyer_number" :clearable="false" />
					</u-form-item>
				</view>
				<!-- 从业年限 -->
				<view class="form-item">
					<u-form-item label="从业年限" label-width="200rpx" required prop="lawyer_years">
						<u-input placeholder="请填写" type="text" input-align="right" v-model="setLawyerFormData.lawyer_years" :clearable="false" />
					</u-form-item>
				</view>
				<!-- 律师各项收费区域 -->
				<view class="form-item item-money">
					<u-form-item label="企业法律顾问价格" label-width="auto" required prop="lawyer_adviser_money">
						<u-input placeholder="请输入" type="number" input-align="right" v-model="setLawyerFormData.lawyer_adviser_money" :clearable="false" />
					</u-form-item>
				</view>
				<view class="form-item">
					<u-form-item label="个人简介" label-position="top" label-width="auto" required prop="lawyer_big_text">
						<u-input placeholder="请输入个人简介" type="textarea" input-align="left" v-model="setLawyerFormData.lawyer_big_text" :clearable="false" />
					</u-form-item>
				</view>
				<view class="lawyer-data-title" style="height: 20rpx;"></view>
				<!-- 提交审核按钮 -->
				<view class="form-item bottom-btn-box"><view class="submitBtn" @click="submitClick">提交审核</view></view>
			</u-form>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sexShow: false,
			areaShow: false,
			addressShow: false,
			eduShow: false, // 选择学历的select
			goodTypeShow: false, // 擅长领域的select
			uploadAction: 'https://legal.cqgzd.com/api/common/upload',		// 上传图片/视频的服务器地址
			// 表单数据对象
			setLawyerFormData: {
				name: '',
				phone: '',
				sex: '',
				gender: '',		// 性别 0：女 1:男
				region_label: '',	// 省市组合的文本（用于显示）
				province: '', 	// 省地址ID
				city: '',		// 市地址ID
				address: '', // 详细地址
				avatar_src: '', // 上传头像
				user_ID_main: '', // 上传的身份证的正面
				user_ID_back: '', // 上传的身份证的反面
				book_year_img: '',	// 证件年审照
				lawyer_practice_img: '',	// 律师执业照

				lawyer_education: '', // 律师学历
				education: '',		// 学历的id
				lawyer_good_type: '', // 律师擅长领域
				good_at: [],	// 擅长领域，案件类型 ID
				lawyer_number: '',	// 证书编号
				lawyer_years: '', // 从业年限
				lawyer_adviser_money: '', // 法律顾问价格
				lawyer_big_text: '' // 个人简介
			},
			// 定义表单验证规则对象
			rules: {
				name: [
					{
						required: true,
						message: '律师姓名不能为空',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}
				],
				phone: [
					{
						required: true,
						message: '联系电话不能为空',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur'
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.utils.isPhone(value)
						},
						message: '请输入11位格式的手机号',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur'
					}
				],
				address: [
					{
						required: true,
						message: '详细地址不能为空',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}
				],
				lawyer_number: [
					{
						required: true,
						message: '律师证书编号不能为空',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}
				],
				lawyer_years: [
					{
						required: true,
						message: '从业年限不能为空',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}
				],
				lawyer_adviser_money: [
					{
						required: true,
						message: '企业法律顾问价格不能为空',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}
				],
				lawyer_big_text: [
					{
						required: true,
						message: '律师个人简介不能为空',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}
				],
			},
			sexList: [
				{
					value: 1,
					label: '男'
				},
				{
					value: 0,
					label: '女'
				}
			],
			// 模拟的地区数据
			provinceDataList: [],
			// 模拟详细地址数据
			addressList: [
				{
					value: 1,
					label: '玄武区',
					children: [
						{
							value: 2,
							label: '黄埔街道',
							children: [
								{
									value: 3,
									label: '和平小区'
								},
								{
									value: 4,
									label: '景秀小区'
								}
							]
						},
						{
							value: 5,
							label: '解放大街',
							children: [
								{
									value: 6,
									label: '帝国大厦'
								},
								{
									value: 7,
									label: '朝阳小区'
								}
							]
						}
					]
				},
				{
					value: 8,
					label: '南明区',
					children: [
						{
							value: 2,
							label: '黄埔街道',
							children: [
								{
									value: 3,
									label: '和平小区'
								},
								{
									value: 4,
									label: '景秀小区'
								}
							]
						},
						{
							value: 5,
							label: '解放大街',
							children: [
								{
									value: 6,
									label: '帝国大厦'
								},
								{
									value: 7,
									label: '朝阳小区'
								}
							]
						}
					]
				}
			],
			// 上传头像的地址
			avatar_action: '',
			// 模拟学历数据
			eduList: [],
			// 擅长领域数据列表
			goodTypeList: [[], []]
		};
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.setLawyerFormRef.setRules(this.rules);
	},
	onLoad() {
		this.getRegionData()
		this.getEducation()
		this.getcaseTypeList()
	},
	methods: {
		// 获取案件类型数据类别组装擅长领域数据
		async getcaseTypeList() {
			const res = await this.$u.api.getcaseTypeList()
			if(!res) return
			for(let k in res) {
				let item = {
					value: res[k].id,
					label: res[k].name
				}
				this.goodTypeList[0].push(item)
				this.goodTypeList[1].push(item)
			}
			// console.log(this.goodTypeList);
		},
		// 获取学历可选数据列表
		async getEducation() {
			const res = await this.$u.api.getEducation()
			if(!res) return
			let arr = JSON.stringify(res).replace(/{/g, '').replace(/}/g, '').split(',')
			arr.forEach(item => {
				let obj = {
					value: item.split(':')[0].replace(/"/g, ''),
					label: item.split(':')[1].replace(/"/g, '')
				}
				this.eduList.push(obj)
			})
			// console.log(this.eduList);
		},
		// 获取全国省市联动数据
		async getRegionData() {
			const res = await this.$u.api.getRegionData();
			// 省级
			for (let k in res) {
				let item = {
					value: res[k].id,
					label: res[k].name,
					children: []
				}
				// 市级
				let obj = res[k].city
				for(let i in obj) {
					let item2 = {
						pid: obj[i].pid,	// pid 就是父级的 id
						value: obj[i].id,
						label: obj[i].name
					}
					item.children.push(item2)
				}
				this.provinceDataList.push(item)
			
			}
			// console.log(this.provinceDataList);
		},
		// 上传头像、身份证、年审照、执业照的方法
		async uploadFunction(index) {
			uni.showLoading({
				mask: true,
				title: '上传中...'
			})
			// uploadFile 存储需要上传的文件
			let uploadFile = ''
			// 1.选择图片（只能单选一张）
			const res = await uni.chooseImage({
				count: 1,
				sizeType: ['original'],
				sourceType: ['album'],
			});
			// console.log('选择图片:', res);
			if(res.length < 2) return	// 小于2则没有选择图片
			uploadFile = res[1].tempFilePaths[0];
			// console.log(uploadFile);
			var that1 = this;
			// 2.将选择的图片上传到目标服务器
			const arr = await uni.uploadFile({
				// 需要上传的地址
				url: that1.uploadAction,
				// filePath  需要上传的文件
				filePath: uploadFile,
				name: 'file',
				header: {
					token: that1.vuex_token		// 挂载请求头为用户的 token
				},
			});
			let data = JSON.parse(arr[1].data)
			// console.log('data:', data);
			if(data.code !== 1) return that1.$u.toast('上传失败，请重试')
			// 判断此次上传的是什么位置：index的值：1 头像 2 身份证正面 3 身份证反面 4 证件年审面 5 律师职业照
			switch(index) {
				case 1:
					this.setLawyerFormData.avatar_src = data.data.fullurl;
					break;
				case 2:
					this.setLawyerFormData.user_ID_main = data.data.fullurl;
					break;
				case 3:
					this.setLawyerFormData.user_ID_back = data.data.fullurl;
					break;
				case 4:
					this.setLawyerFormData.book_year_img = data.data.fullurl;
					break;
				case 5:
					this.setLawyerFormData.lawyer_practice_img = data.data.fullurl;
					break;
			}
			uni.hideLoading()
		},
		// 选择性别
		selectSexClick(arr) {
			this.setLawyerFormData.sex = arr[0].label
			this.setLawyerFormData.gender = arr[0].value
		},
		// 选择地区
		selectAreaClick(arr) {
			this.setLawyerFormData.province = arr[0].value
			this.setLawyerFormData.city = arr[1].value
			this.setLawyerFormData.region_label = arr[0].label + '-' + arr[1].label
		},
		// 选择学历
		selectEduClick(arr) {
			this.setLawyerFormData.lawyer_education = arr[0].label
			this.setLawyerFormData.education = arr[0].value
		},
		// 选择律师擅长领域
		selectGoodTypeClick(arr) {
			this.setLawyerFormData.lawyer_good_type = `${arr[0].label}    ${arr[1].label}`;
			this.setLawyerFormData.good_at[0] = arr[0].value
			this.setLawyerFormData.good_at[1] = arr[1].value
		},
		// 提交审核按钮点击事件
		submitClick() {
			this.$refs.setLawyerFormRef.validate( async valid => {
				// 表单校验 1 校验必填项
				if(!valid) return this.$u.toast('请先完善必须的数据!')
				// 2 校验必选项和必须上传的文件
				if(	!this.setLawyerFormData.sex || 
					!this.setLawyerFormData.province || 
					!this.setLawyerFormData.avatar_src || 
					!this.setLawyerFormData.user_ID_main || 
					!this.setLawyerFormData.user_ID_back || 
					!this.setLawyerFormData.book_year_img || 
					!this.setLawyerFormData.lawyer_practice_img || 
					!this.setLawyerFormData.lawyer_education || 
					!this.setLawyerFormData.lawyer_good_type
				) return this.$u.toast('请先完善必须的数据!')
				// TODO:后续的提交审核业务逻辑
				let params = {
					nick_name: this.setLawyerFormData.name,
					gender: this.setLawyerFormData.gender,
					mobile: this.setLawyerFormData.phone,
					avatar: this.setLawyerFormData.avatar_src,
					province: this.setLawyerFormData.province,
					city: this.setLawyerFormData.city,
					address: this.setLawyerFormData.address,
					idcard_face: this.setLawyerFormData.user_ID_main,
					idcard_back: this.setLawyerFormData.user_ID_back,
					ns_url: this.setLawyerFormData.book_year_img,
					zyz_url: this.setLawyerFormData.lawyer_practice_img,
					zyz_no: this.setLawyerFormData.lawyer_number,
					education: this.setLawyerFormData.education,
					work_year: this.setLawyerFormData.lawyer_years,
					good_at: this.setLawyerFormData.good_at,
					counsel_charge: this.setLawyerFormData.lawyer_adviser_money,
					comment: this.setLawyerFormData.lawyer_big_text,
				}
				const res = await this.$u.api.setLawyerItem(params)
				if(!res) return
				const res2 = await this.$u.api.getLawyerItemResult()
				if(!res2) return
				if(res2.status === 0) {
					this.$u.route({
						type: 'redirect',	// 关闭当前页面进行跳转
						url: '/myPackageA/pages/views/submitted-for-review',	// 审核中页面
					})		
				} else {
					let result = res2.status === 1 ? 1 : 0
					this.$u.route({
						type: 'redirect',	// 关闭当前页面进行跳转
						url: '/myPackageA/pages/views/set-lawyer-result?state=' + result,	// 失败或成功页面,参数：0 表示失败，1 表示成功
					})
					
				}
				
				
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.set-lawyer-box {
	width: 750rpx;
	min-height: 100vh;
	background-color: #f5f5f5;
	.top-tip-box {
		width: 100%;
		height: 94rpx;
		line-height: 47rpx;
		background-color: white;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		padding: 0 28rpx;
	}
	.set-lawyer-form-box {
		margin-top: 20rpx;
		background-color: white;
		width: 100%;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #141418;
		.form-item {
			width: 100%;
			min-height: 94rpx;
			line-height: 94rpx;
			padding: 0 50rpx;
			border-bottom: 1rpx solid #e7eaf0;
		}
	}
}
.upload-avatar-box {
	min-height: 394rpx !important;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	border: none !important;
	.avatar-text {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ff2e2e;
		position: absolute;
		top: 50rpx;
		left: 50rpx;
	}
	.upload-avatar {
		height: 250rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.avatar-box {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			position: relative;
			.text {
				position: absolute;
				bottom: 0rpx;
				left: auto;
			}
		}
	}
}
.upload-avatar-img {
	width: 154rpx;
	height: 154rpx;
	border-radius: 50%;
	overflow: hidden;
	background-color: #dfdfdf;
	position: relative;
}
.upload-style {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: skyblue;
	z-index: 2;
	opacity: 0;
}
.upload-ID {
	display: flex;
	justify-content: space-between;
}
.ID-img {
	background-color: #f9f9f9;
	// border: 1rpx dashed #000000;
}
.upload-ID-box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	font-size: 22rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #141418;
	.upload-ID-img {
		width: 296rpx;
		height: 189rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f9f9f9;
		// border: 1rpx dashed #000000;
	}
}
.lawyer-data-title {
	height: 80rpx;
	line-height: 80rpx;
	background-color: #f5f5f5;
	margin-left: 31rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #141418;
	position: relative;
	&::before {
		content: ' ';
		width: 30rpx;
		height: 100%;
		background-color: #f5f5f5;
		position: absolute;
		top: 0;
		left: -30rpx;
	}
}
.item-money {
	position: relative;
	font-size: 32rpx !important;
	font-family: PingFang SC;
	font-weight: 500;
	color: #141418;
	padding-right: 75rpx !important;
	&::after {
		width: auto;
		height: 100%;
		line-height: 112rpx;
		text-align: center;
		content: '元';
		position: absolute;
		top: 0;
		right: 25rpx;
	}
}
.bottom-btn-box {
	height: 188rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	.submitBtn {
		width: 700rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: $u-text-color;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}
}
</style>
